<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户注册</title>
  <script type="text/javascript">
    window.onload = function () {
      //页面加载后执行function
      var checkButton = document.getElementById("checkButton");
      checkButton.onclick = function () {

        //1.创建XMLHttpRequest对象 (ajax引擎对象)
        var xhr = new XMLHttpRequest();

        //2.获取用户填写的用户名
        var username = document.getElementById("uname").value;

        //3.准备发送指定数据 open send
        /*
          GET 请求方式 GET/POST
          /ajax/checkUserServlet?username="+username 请求url
          true 表示异步发送
         */
        xhr.open("GET", "/ajax/checkUserServlet?username="+username, true)

        //在send方法调用前，给XmlHttpRequest绑定一个事件onreadystatechange
        /*
          onreadystatechange 表示可以去指定一个函数，当数据变化时，会触发
          即每当xhr的readyState改变时，就会触发onreadystatechange事件
         */
        xhr.onreadystatechange = function () {
          //如果请求已完成，且响应已就绪
          if (xhr.readyState == 4 && xhr.status == 200) {
            //获取返回的信息
            var responseText = xhr.responseText;
            if (responseText != null && responseText !=="") {
              //在页面显示
              document.getElementById("myres").value = "用户名不可用";
              document.getElementById("div1").innerText = responseText;
            } else {
              //在页面显示
              document.getElementById("myres").value = "用户名可用";
            }

          }
        }

        //4.真正发送ajax请求(http请求)
        /*
          如果是post请求，在send()可以填写要发送的数据
         */
        xhr.send();
      }
    }
  </script>
</head>
<body>
<h1>用户注册~</h1>
<form action="/ajax/checkUserServlet" method="post">
  用户名字:<input type="text" name="username" id="uname">
  <input type="button" id="checkButton" value="验证用户名">
  <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
  用户密码:<input type="password" name="password"><br/><br/>
  电子邮件:<input type="text" name="email"><br/><br/>
  <input type="submit" value="用户注册">
</form>
<h1>返回的json数据</h1>
<div id="div1"></div>
</body>
</html>